<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>分析报表</h2>
                <ol class="breadcrumb">
                    <li>
                        消防动态监测系统
                    </li>
                    <li class="active">
                        分析报表
                    </li>
                </ol>
            </div>
        </div>

        <div class="wrapper wrapper-content">
            <div class="">
            <#include "./analysis_report_model.ftl" >
            </div>
        </div>

    <#include "./bottom_nav.ftl">
    </div>

</div>

<div class="modal inmodal" id="chartModal" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog"  style="width: 1000px;">
        <div class="modal-content animated bounceInDown">
            <div class="modal-header" style="padding: 0 0 0 0">
                <h4 id="chartModelHeaderTitle" class="modal-title"></h4>
            </div>
            <input id="monthID" type="text" style="display: none;">
            <div class="modal-body" style="padding: 5px 5px 5px 5px;">
                <div style="padding: 0 0 0 0;"><canvas id="barChartModel"></canvas></div>
            </div>
            <div class="modal-footer">
                <button <#if (role_type_id > 2)>disabled</#if> id="chartExport" type="button" class="btn btn-primary pull-left"><i class="fa fa-file-excel-o"></i>&nbsp;&nbsp;导出</button>
                <button id="chartCANCEL" type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-close"></i>&nbsp;&nbsp;关闭</button>
            </div>
        </div>
    </div>
</div>

<#include "./js.ftl">

<script>
    /*   analysis_report_model js*/

    var report_year = 0;
    var overViewTable = $('#overViewTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索IP:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        ajax: "${baseURL}/water/dt_analysis_report/getAll?year=" + report_year,
        columns:[
            {"data":"month","render":function(data, type, row, meta){
                if(data<10) data = "0"+data;
                return data+"月";
            }},
            {"data":"month_all"},
            {"data":"month_confirm"},
            {"data":"month_alarm"},
            {"data":"month_rate","render":function(data, type, row, meta){
                var ret = data * 100;
                return ret.toFixed(2) + "%";
            }},
            {"data":"null","render":function(data, type, row, meta){
                var obj = encodeURIComponent(JSON.stringify(row));
                return '<div class="col-md-12" style="padding: 0 0 0 0;"><button type="button" data-toggle="modal" data-target="#chartModal" onclick='+"showMonth("+'"'+obj+'"'+")"+ '  class="btn btn-block btn-primary" style="padding: 0 0 0 0;">详&nbsp;情</button></div>'
            },"width":"15%"}
        ],
        ordering:true,
        searching:false,
        bLengthChange:false,
        info:false,
        paging:false
    });


    function showMonth(obj){
        var month = JSON.parse(decodeURIComponent(obj)).month;
        var year = $("#yearSelect").val();
        $("#monthID").val(month);
        $("#chartModelHeaderTitle").html(year+"年"+month+"月记录")
        $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            url: "${baseURL}/water/dt_analysis_report/getMonth",
            data: {"year":year,"month":month},
            async: false,
            success:function(data){
                if(data.code === 0){
                    {
                        var label = [];
                        var datas = [];
                        var alarm_datas = [];
                        var confirm_datas = [];
                        var showArr = [];
                        for (var i in data.data) {
                            label.push(data.data[i].day + "日");
                        }
                        for (var i in data.data) {
                            alarm_datas.push(data.data[i].day_alarm);
                        }
                        for (var i in data.data) {
                            confirm_datas.push(data.data[i].day_confirm);
                        }
                        for (var i in data.data) {
                            datas.push(data.data[i].day_all);
                        }
                        $("#chartModal").on('shown.bs.modal',function(event){
                            var barData = {
                                labels: label,
                                datasets: [
                                    {
                                        label: "未处理",
                                        fillColor: "rgba(255, 0, 51,0.5)",
                                        strokeColor: "rgba(255, 0, 51,0.8)",
                                        highlightFill: "rgba(255, 0, 51.75)",
                                        highlightStroke: "rgba(255, 0, 51,1)",
                                        data: alarm_datas
                                    },
                                    {
                                        label: "已确认",
                                        fillColor: "rgba(26,179,148,0.5)",
                                        strokeColor: "rgba(26,179,148,0.8)",
                                        highlightFill: "rgba(26,179,148,0.75)",
                                        highlightStroke: "rgba(26,179,148,1)",
                                        data: confirm_datas
                                    },
                                    {
                                        label: "报警数量",
                                        fillColor: "rgba(248, 172, 89,0.5)",
                                        strokeColor: "rgba(248, 172, 89,0.8)",
                                        highlightFill: "rgba(248, 172, 89,0.75)",
                                        highlightStroke: "rgba(248, 172, 89,1)",
                                        data: datas
                                    }
                                ]
                            };
                            var barOptions = {
                                scaleBeginAtZero: true,
                                scaleShowGridLines: true,
                                scaleGridLineColor: "rgba(0,0,0,.05)",
                                scaleGridLineWidth: 1,
                                barShowStroke: true,
                                barStrokeWidth: 2,
                                barValueSpacing: 5,
                                barDatasetSpacing: 1,
                                responsive: true,
                                multiTooltipTemplate: function(chartData) {return chartData.datasetLabel + " : " + chartData.value;}
                            }
                            var ctx = document.getElementById("barChartModel").getContext("2d");
                            var myNewChart = new Chart(ctx).Bar(barData, barOptions);
                        })

                    }
                }
                else{
                    swal({
                        title: "操作失败。",
                        type: "error"
                    })
                }
            },
            error:function(xhr, status, error){
                console.log(xhr.responseText);
                swal({
                    title: "网络错误。",
                    type: "error"
                })
            }
        });
    }

    $("#yearExportBtn").click(function () {
        var year = $("#yearSelect").val();
        var tail = document.documentURI.substring(7);
        var server = tail.substring(0, tail.indexOf("/"));
        var urlAddr = "http://"+server+"${baseURL}/water/export/year?year=" + year;
        window.open(urlAddr);
    });

    $("#chartExport").click(function () {
        var year = $("#yearSelect").val();
        var month = $("#monthID").val();
        var tail = document.documentURI.substring(7);
        var server = tail.substring(0, tail.indexOf("/"));
        var urlAddr = "http://"+server+"${baseURL}/water/export/month?year=" + year +"&month=" + month;
        window.open(urlAddr);
    });

    function showChart(year){
        $.ajax({
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            url: "${baseURL}/water/dt_analysis_report/getAll?year=" + year,
            success:function(data){
                if (data.code !== 0) {
                } else {
                    var label = [];
                    var datas = [];
                    var alarm_datas = [];
                    var confirm_datas = [];
                    var showArr = [];
                    for (var i in data.data) {
                        label.push(data.data[i].month + "月");
                    }
                    for (var i in data.data) {
                        alarm_datas.push(data.data[i].month_alarm);
                    }
                    for (var i in data.data) {
                        confirm_datas.push(data.data[i].month_confirm);
                    }
                    for (var i in data.data) {
                        datas.push(data.data[i].month_all);
                    }
                    var barData = {
                        labels: label,
                        datasets: [
                            {
                                label: "未处理",
                                fillColor: "rgba(255, 0, 51,0.5)",
                                strokeColor: "rgba(255, 0, 51,0.8)",
                                highlightFill: "rgba(255, 0, 51.75)",
                                highlightStroke: "rgba(255, 0, 51,1)",
                                data: alarm_datas
                            },
                            {
                                label: "已确认",
                                fillColor: "rgba(26,179,148,0.5)",
                                strokeColor: "rgba(26,179,148,0.8)",
                                highlightFill: "rgba(26,179,148,0.75)",
                                highlightStroke: "rgba(26,179,148,1)",
                                data: confirm_datas
                            },
                            {
                                label: "报警数量",
                                fillColor: "rgba(248, 172, 89,0.5)",
                                strokeColor: "rgba(248, 172, 89,0.8)",
                                highlightFill: "rgba(248, 172, 89,0.75)",
                                highlightStroke: "rgba(248, 172, 89,1)",
                                data: datas
                            }
                        ]
                    };
                    var barOptions = {
                        scaleBeginAtZero: true,
                        scaleShowGridLines: true,
                        scaleGridLineColor: "rgba(0,0,0,.05)",
                        scaleGridLineWidth: 1,
                        barShowStroke: true,
                        barStrokeWidth: 2,
                        barValueSpacing: 5,
                        barDatasetSpacing: 1,
                        responsive: true,
                        multiTooltipTemplate: function(chartData) {return chartData.datasetLabel + " : " + chartData.value;}
                    }
                    var ctx = document.getElementById("barChart").getContext("2d");
                    var myNewChart = new Chart(ctx).Bar(barData, barOptions);
                }
            },
            error:function(xhr, status, error){
                swal({
                    title: "网络错误。",
                    type: "error"
                })
            }
        });
    }

    $(function(){
        var years = [];
        var currentYear = (new Date()).getFullYear();
        for(var i = 0; i < 5; i++){
            years.push({"id":currentYear - i,"text":currentYear - i + "年份"});
        }
        $("#yearSelect").select2({
            language: {
                "noResults": function () {
                    return "没有数据";
                }
            },
            allowClear:false,
            placeholder: "请选择年份",
            data: years
        });
        $("#yearSelect").on('change',function(){
            report_year = $("#yearSelect").val();
            overViewTable.ajax.url("${baseURL}/water/dt_analysis_report/getAll?year=" + report_year).load();
            showChart(report_year);
        });
        showChart(report_year);
    });

</script>
</body>
</html>